<template>
	<view class="box">
		<view class="box-one">
			<view style=" border-bottom: 1rpx dotted  #ccc;: 25rpx;margin-left: 8rpx;
			margin-top: 30rpx; height: 80rpx ; 
			">
				<text style="color: red;"> *</text>分类
				<view>
					<u-picker @cancel="cancel" @confirm="confirm" @change="changeHandler" :show="show"
						:columns="columns"></u-picker>
					<view style=" width: 70%; position: absolute;top: 15rpx;left:130rpx;">
						<view class="Pre" @click="show = true">{{open}}</view>
					</view>
				</view>
			</view>
			<view  class="content">
				<u--textarea border="none-"   height="150" v-model="value2" placeholder="请输入内容" count>
				</u--textarea>
			</view>
		</view>
		<button class="button"
			style="  background-color:#3F76EE;;absolute; top:1150rpx;width: 90%;border-radius: 90rpx   ">
			<view style="color: aliceblue;">
				提交
			</view>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				open: '打开',
				value2: '管理建议: ',
				show: false,
				columns: [
					['中国', '美国', '日本']
				],
			};
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			confirm(e) {
				console.log('confirm', e)
				this.show = false
				this.open = e.value[0]

			},
			cancel() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">

	.box {
		background-color: #eeeeee;
		height: 100vh;
		width: 100%;
		.box-one {
			width: 90%;
			height: 480rpx;
			position: absolute;
			top: 35rpx;
			left: 35rpx;
			border-radius: 15rpx;
			background-color: white;
			.city {
				width: 500rpx;
				border: none;
			}
			.content {
				margin-top: 30rpx;
				height: 350rpx;
				border: none;
			
			}
			.Pre{
				background-color: white;
				position: absolute;
				top: 17rpx;
				left: 200rpx;
			}
		}
	}
</style>
